// el-select
.el-select-no-border {
    .el-select__wrapper {
        box-shadow: none !important;
        text-align: right !important;
        font-size: 20px !important;
        font-weight: bolder;
        color: #fff;
        padding: 0px !important;
    }

    .el-select__placeholder {
        color: #fff;
    }

    .el-select__caret {
        color: #fff;
        font-weight: bolder;
        font-size: 12px;
    }
}

.el-month-table {
    font-size: 18px !important;
}

.el-date-picker__header-label {
    font-size: 20px !important;
}

.el-picker-panel__icon-btn {
    font-size: 20px !important;
    margin-top: 4px !important;
}


// 分页样式


.el-pagination.is-background .el-pager li {
    background: #003836;
    border: 1px solid #066D6E;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
    background: #003836;
    border: 1px solid #066D6E;
}

.el-pagination.is-background .btn-prev {
    background: #003836;
    border: 1px solid #066D6E;
}

.el-pagination.is-background .el-pager li.is-active {
    background: #00C164;
}

// 表格样式
.el-table .el-table__cell{
    font-size: 16px;
    color: #fff;
}

.el-table tr {
    background: transparent;
}

.el-progress__text{
    color: #01FF85 !important;
    font-size: 24px;
    font-family: Oswald;
}

.el-progress-bar__outer {
    background: rgba(48, 211, 133, .12);
}

/* 全局样式 */
.el-select-dropdown__item {
    font-size: 14px !important;
    color: #fff !important;
}

.custom-style {
    .el-segmented {
      padding: 5px;
      min-height: 42px;
      font-weight: bold;
    }
  }

  .el-dialog{
    background: rgba(12, 45, 49, .92) !important;
}

@mixin screenSelect {
  &.el-date-editor {
    --el-input-height: 36px;
    .el-input__wrapper {
      background: rgba(31, 62, 93, 0.6);
      border: 1px solid rgba(133, 214, 255, 0.2);
      box-shadow: none;
      .el-input__inner {
        color: #fff;
        &::placeholder {
          color: #fff;
        }
      }
      .el-input__suffix {
        .el-icon {
          color: #fff;
        }
      }
    }
    .el-input__inner {
      color: #fff;
      &::placeholder {
        color: #fff;
      }
    }
    .el-input__prefix {
      .el-icon {
        color: #fff;
      }
    }
  }
  &.el-range-editor {
    background: rgba(31, 62, 93, 0.6);
    border: 1px solid rgba(133, 214, 255, 0.2);
    box-shadow: none !important;

    .el-range-input {
      color: #fff;
      &::placeholder {
        color: #fff;
      }
    }
    .el-range-separator {
      color: #fff;
    }
  }
  &.el-select {
    .el-select__wrapper {
      background: rgba(124,207,255,0.12);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: none;
      min-height: 32px;
    //   padding: 3px 10px;
      .el-select__input-wrapper {
        color: #fff;
      }
      .el-select__placeholder {
        color: #fff !important;
      }
      .el-select__suffix {
        .el-icon {
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.screen-select {
  @include screenSelect;
}

@mixin screenInput {
  &.el-input {
    .el-input__wrapper {
      background: rgba(124,207,255,0.12);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: none;
      min-height: 32px;
      // padding: 3px 10px;
      .el-input__inner {
        font-size: 14px;
        &::placeholder {
          color: #fff;
        }
      }
      .el-input__suffix {
        .el-icon {
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
.screen-input {
  @include screenInput;
}

.screen-button {
  font-size: 16px;
  transition: all 0.2s;
  &.el-button--primary {
    background: linear-gradient(101deg, rgba(10,102,255,0.21) 0%, rgba(13,87,212,0.44) 63%, rgba(1,70,182,0.69) 100%);
    box-shadow: inset 0px 0px 10px 1px #3D91FF;
    border: 1px solid #3698FF;
    &:hover {
      box-shadow: inset 0px 0px 10px 1px #2a3cff;
    }
  }
  &.el-button--default {
    background: rgba(124,207,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    &:hover {
       background: rgba(124, 207, 255, 0.15)
    }
  }
}

.screen-pagination.el-pagination {
  @mixin btn {
    border: 1px solid #225A8F;
    border-radius: 4px;
    color: #fff;
    background: #123E65;
    transition: all 0.3s;
    &.is-active, &:hover {
      background: linear-gradient( 101deg, rgba(10,102,255,0.21) 0%, rgba(13,87,212,0.44) 63%, rgba(1,70,182,0.69) 100%);
      box-shadow: inset 0px 0px 10px 1px #3D91FF;
      border: 1px solid #3698FF;
    }
  }
  .el-pagination__total {
    font-size: 14px;
    color: #fff;
  }
  .btn-prev,
  .btn-next {    
    .el-icon {
      color: #fff;
      transition: color 0.3s;
    }
    &:not([disabled]) {
      @include btn;
    }
    &[disabled] {
      border: 1px solid #526474;
      background: none;
      background-color: transparent;
      .el-icon {
        color: #a1a7a7ff;
      }
    }
  }
  .el-pager {
    margin-right: 8px;
    .number,
    .more {
      @include btn;
      margin-left: 8px;
    }
  }
  .el-select {
    @include screenSelect;
  }
  .el-input {
    @include screenInput;
    .el-input__inner {
      font-size: 16px !important;
    }
  }
  .el-pagination__jump {
    color: #fff;
  }
}